<template>
<div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
	<div class="row">
    <div class="col-md-12">
      <form id="reportTaskSubmitForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
        <input type="hidden" name="id" v-model="item.id"/>
        <input type="hidden" name="token" v-model="item.token"/>
        <input type="hidden" name="newFlag" v-model="newFlag"/>
        <div class="clearfix"></div>
        <div class="col-md-12">
          <div class="form-group clearfix col-md-4">
            <label class="control-label">报送类别：</label>
            <div class="col-md-12 form-control">
              {{item.type}}
            </div>
          </div>
          <div class="form-group clearfix col-md-4">
            <label class="control-label">报送单位：</label>
            <div class="col-md-12 form-control">
              {{item.taskOrgName}}
            </div>
          </div>
          <div class="form-group clearfix col-md-4">
            <label class="control-label">任务内容：</label>
              <div class="col-md-12 form-control">
                {{item.taskContent}}
              </div>
            </div>
            <div class="form-group clearfix col-md-4">
              <label class="control-label">报送标题：</label>
              <div class="col-md-12 form-control">
                {{item.title}}
              </div>
            </div>
            <div class="form-group clearfix col-md-4">
              <label class="control-label">截止日期：</label>
              <div class="col-md-12 form-control">
                {{item.dateDeadline | date('yyyy-MM-dd')}}
              </div>
            </div>
          </div>
          <div class="clearfix"></div>
          <hr/>
          <div class="col-md-12">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">报送人：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-reportingRiveruserName-error" aria-invalid="true" class="form-control" id="bean-reportingRiveruserName" maxlength="255" name="reportingRiveruserName" placeholder="请输入填报机构名称" required="" type="text" v-model="item.reportingRiveruserName">
                <span class="help-block m-b-none" for="bean-reportingRiveruserName" id="bean-reportingRiveruserName-error"></span>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">提交日期：</label>
              <div class="col-md-12">
                <input aria-describedby="bean-reportingDate-error" aria-invalid="true" autocomplete="off" class="laydate-icon form-control layer-date" id="bean-reportingDate" name="reportingDate" placeholder="请输入填报日期" required="" type="text" v-model="item.reportingDate">
                <span class="help-block m-b-none" for="bean-reportingDate" id="bean-reportingDate-error"></span>
              </div>
            </div>
          </div>
          <div class="clearfix "></div>
          <div class="col-md-12">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">填报内容：</label>
              <div class="col-md-12">
                <vue-ueditor-wrap :config="ueConfig" aria-describedby="bean-reportingContent-error" aria-invalid="true" id="bean-reportingContent" name="reportingContent" placeholder="请输入内容" style="height: 300px;width: 100%;" v-model="item.reportingContent"></vue-ueditor-wrap>
                <span id="bean-reportingContent-error" class="help-block m-b-none" for="bean-reportingContent"></span>
              </div>
            </div>
          </div>
          <div class="clearfix "></div>
          <div class="col-md-12" style="margin-top: 20px;">
            <input type="hidden" name="reportTaskId" v-model="item.reportTaskId">
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">报告文档：
                <button class="btn btn-white" id="upload_btn_file" type="button">点击上传</button>
              </label>
              <div class="col-md-12">
                <input id="bean_file" class="form-control" name="file" v-model="item.file" type="text" placeholder="请输入报告文档" aria-describedby="bean-file-error" aria-invalid="true">
                <span id="bean-file-error" class="help-block m-b-none" for="bean-file"></span>
              </div>
            </div>
          </div>
          <div class="clearfix "></div>
          <div class="col-12 text-center" style="height: 50px;">
            <div>
              <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
            </div>
          </div>
        </form>
        </div>
      </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'

  import '@/assets/css/upload.css'
  import VueUeditorWrap from 'vue-ueditor-wrap'
  import '@/assets/js/upload_single_file.js'
  import {apiUtil, axiosContentType, site, ueConfig} from '@/assets/js/boss'

  import 'layui-laydate/dist/theme/default/laydate.css'
  import laydate from 'layui-laydate'

  export default {
    components: {
      VueUeditorWrap
    },
    data() {
      return {
        item: {},
        newFlag: 0,
        uuidToken: '',
        ueConfig: ueConfig
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      $('#reportTaskSubmitForm').validate();
      that.staff.init(function () {
        that.newFlag = sessionStorage.getItem(site.reportTaskSubmit.info);
        if (that.newFlag) that.uuidToken = apiUtil.guid();
        if (apiUtil.existSessionKey(site.reportTaskSubmit.info)) {
          that.info();
        }
      });
      laydate.render({
        elem: '#bean-reportingDate',
        event: 'click',
        done: function (val) {
          that.item.reportingDate = val;
        }
      });
      window.upload_single_file('upload_btn_file', 'bean_file', '*', 'file');
    },
    methods: {
      info() {
        let that = this;
        axios.get(site.reportTaskSubmit.info + sessionStorage.getItem(site.reportTaskSubmit.info), {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.item = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      save() {
        let that = this;
        if ($('#reportTaskSubmitForm').valid()) {
          axios.post(site.reportTaskSubmit.save, $('#reportTaskSubmitForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
            const result = response.data;
            // console.info("获取数据.." + JSON.stringify(result));
            if (result.code === 0) {
              parent.$vueApp.page();
              alert('保存成功!');
              that.lbox.closeMyBoxLayer()
            } else {
              alert(result.message);
            }
          });
        }
      }
    }
  }
</script>
